<template>
  <view class="user-info">
    <view class="form-item">
      <label>性别：</label>
      <picker mode="selector" :range="genderOptions" @change="handleGenderChange">
        <view class="picker-view">{{ gender ? gender : '请选择性别' }}</view>
      </picker>
    </view>
    <view class="form-item">
      <label>年龄：</label>
      <input type="number" v-model="age" placeholder="请输入年龄" />
    </view>
    <view class="form-item">
      <label>病史：</label>
      <picker mode="multiSelector" :range="medicalHistoryOptions" @change="handleMedicalHistoryChange">
        <view class="picker-view">
          {{ selectedMedicalHistory.length > 0 ? selectedMedicalHistory.join('，') : '请选择病史' }}
        </view>
      </picker>
    </view>
    <view v-if="selectedMedicalHistory.includes('其他')" class="form-item">
      <label>特殊情况：</label>
      <textarea v-model="specialCondition" placeholder="请输入特殊情况说明"></textarea>
    </view>
    <button @click="submitUserInfo" class="submit-button">提交</button>
  </view>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { useStore } from 'vuex'; // 引入 useStore 函数

const genderOptions = ref(['男', '女']); // 性别选项
const gender = ref(''); // 已选择性别
const age = ref(''); // 用户输入的年龄
const medicalHistoryOptions = ref([
  ['无病史', '高血压', '糖尿病', '心脏病', '其他'] // 病史选项
]);
const selectedMedicalHistory = ref<string[]>([]); // 用户选择的病史
const specialCondition = ref(''); // 特殊情况说明

const handleGenderChange = (e: any) => {
  gender.value = genderOptions.value[e.detail.value];
};

const handleMedicalHistoryChange = (e: any) => {
  selectedMedicalHistory.value = e.detail.value.map((index: number) =>
    medicalHistoryOptions.value[0][index]
  );
};

const store = useStore(); // 使用 useStore 函数获取 store 实例

const submitUserInfo = async () => {
  console.log("提交信息：", gender.value, age.value, selectedMedicalHistory.value, specialCondition.value);

  const userInfo = {
    gender: gender.value,
    age: age.value,
    medicalHistory: selectedMedicalHistory.value,
    specialCondition: specialCondition.value
  };

  // 调用 Vuex Action 提交数据
  try {
    await store.dispatch('SubmitUserInfo', userInfo);
    console.log("提交成功，跳转登录页面");
    uni.navigateTo({
      url: '/pages/login/index'
    });
  } catch (error) {
    console.error("提交失败：", error);
  }
};
</script>
<style scoped>
.user-info {
  max-width: 90%; /* 适配小屏幕 */
  margin: 20px auto;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  font-family: 'Arial', sans-serif;
  color: #333;
}

.form-item {
  display: flex;
  flex-direction: column; /* 垂直排列 */
  margin-bottom: 15px;
}

.form-item label {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.form-item input,
.form-item textarea,
.picker-view {
  width: 100%; /* 占满父容器宽度 */
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  color: #333;
  background-color: #f9f9f9;
}

.form-item input:focus,
.form-item textarea:focus,
.picker-view {
  border-color: #007bff;
}

.picker-view {
  line-height: 20px;
}

textarea {
  resize: none; /* 禁用手动调整大小 */
  min-height: 80px;
}

.submit-button {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(90deg, #007bff, #00b3ff);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-button:hover {
  transform: translateY(-1px);
  opacity: 0.9;
}

@media (max-width: 768px) {
  .user-info {
    padding: 15px;
  }

  .form-item label {
    font-size: 12px;
  }

  .form-item input,
  .form-item textarea {
    font-size: 12px;
    padding: 8px;
  }

  .submit-button {
    padding: 10px;
    font-size: 14px;
  }
}
</style>